<template>
  <ul class="list">
    <li v-for='item in mlist' :key='item.id'>
      <router-link :to="`/detail?id=${item.id}`">
        <img :src="item.img" alt="">
        <div class="info">
          <h3>{{item.title}}</h3>
          <p>豆瓣评分：9</p>
          <p>
            <!-- 动态生成一系列标签结构 -->
            <span class="tag" v-for='(tag, index) in item.tags.split(",")' :key='index'>{{tag}}</span>
          </p>
        </div>
      </router-link>
    </li>
  </ul>
</template>
<script>
import { mapState, mapActions } from 'vuex'

export default {
  computed: {
    // 三种写法 - 以后工作重点要用第三种，但是别人写的另外两个也要知道
    // 原始写法
    // msg () {
    //   return this.$store.state.detail.msg
    // },

    // // 第二种 - 对象写法
    // 把store中的state里面的属性映射为计算属性
    // ...mapState({
    //   mlist: state => state.list.mlist
    // })

    // 第三种 - 最简单的数组写法
    ...mapState('list', ['mlist'])
  },
  methods: {
    // 把action映射为方法
    ...mapActions('list', ['queryMovieList'])
  },
  created () {
    // 触发action获取列表数据
    // this.$store.dispatch('queryMovieList')
    this.queryMovieList()
  }
}
</script>
